<template>
<div class="password-back">
	<div class="password-view">
		<van-field size="large" label-width="70px" v-model="mobile" center clearable type="tel" placeholder="请输入手机号" label="手机号" />
		<van-field
			size="large"
			label-width="70px"
		    center
		    clearable
			type="number"
		    label="验证码"
		    placeholder="请输入验证码"
			v-model="code"
		  >
		    <template #button>
		      <van-button size="mini" type="success" :disabled="codeDisabled" @click="sendCode">{{codeName}}</van-button>
		    </template>
		</van-field>
	</div>
	<div class="password-view">
		<!-- 输入新密码 -->
		  <van-field size="large" label-width="70px" type="password" placeholder="6-20位大小写字母+数字组成" :error-message="errPassword" v-model="password" clearable label="新密码" />
		  <!-- 再次输入新密码 -->
		  <van-field size="large" label-width="70px" type="password" placeholder="请再次输入新密码" :error-message="errNewpassword" v-model="newPassword" clearable label="确认密码" />
	</div>
	<div class="submit-button">
		<van-button type="success" block :loading="loading" loading-text="更新中..." @click="subMit">确定</van-button>
	</div>
</div>
</template>

<script setup>
	import { ref,watchEffect } from 'vue';
	import request from '@/api/request.js'
	import { useRouter } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	
	const mobile = ref('')//手机号
	const code = ref('')//验证码
	const password = ref('')//密码
	const newPassword = ref('')//确认密码
	/* -------发送验证码-------- */
	const codeDisabled = ref(false);
	const countdownTime = ref(60);//倒计时时间
	const codeName = ref('发送验证码')
	const bizId = ref('')//验证码id
	// 发送验证码
	async function sendCode(){
		// 调用发送验证码接口
		const res = await request.get('/vercode',{phoneNumbers:mobile.value})
		bizId.value = res.data.bizId
		// 倒计时开始
		codeDisabled.value = true
		var timer = setInterval(()=>{
			if(countdownTime.value > 1){
				countdownTime.value--
				codeName.value = `${countdownTime.value}秒后重新获取`
			}else{
				clearInterval(timer);
				codeDisabled.value = false
				countdownTime.value = 60
				codeName.value = '发送验证码'
			}
		},1000)
	}
	// 校验表单
	const errPassword = ref('')
	const errNewpassword = ref('')
	watchEffect(()=>{
		// 验证密码是否合法
		const reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/
		if(!reg.test(password.value)){
			errPassword.value = '密码需要6-20位大小写字母+数字组成'
		} else {
			errPassword.value = ''
		}
		// 验证密码是否一致
		if (password.value === newPassword.value) {
		    errNewpassword.value = ''
		} else {
			errNewpassword.value = '两次输入的密码不一致'
		}
	})
	// loading
	const loading = ref(false)
	// 提交更新
	async function subMit(){
		try{
			loading.value = true
			await request.post('/upload_password',{
				mobile:mobile.value,
				code:code.value,
				bizId:bizId.value,
				password:password.value
			})
			loading.value = false
			$router.go(-1)
		}catch(e){
			loading.value = false
		}
	}
</script>

<style>
.password-back{
	background-color: #f6f7f9;
	height: 100vh;
}
.password-view{
	padding: 20px 10px;
}
.submit-button{
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.password-back{
	--van-button-mini-padding: 14px 8px;
	--van-button-mini-font-size: 14px;
	--van-button-normal-font-size: 15px;
}
.van-cell{
	font-size: 16px;
}
</style>